﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Resources/Master.Master" AutoEventWireup="true" CodeBehind="RoomStatusReport.aspx.cs" Inherits="Assignment_3.Feature___Reports.RoomStatusReport" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">

        google.load("visualization", "1", { packages: ["table", "corechart"] });

        function drawChart() {
            //Table
            var hdValue = document.getElementById("<%=hdData.ClientID%>").value;
            var response = $.parseJSON(hdValue);

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Room No.');
            data.addColumn('string', 'Room Type');
            data.addColumn('string', 'Status');
            for (var i = 0; i < response.length; i++) {
                var row = new Array();
                row[0] = response[i].RoomNo;
                row[1] = response[i].Room_Type;
                row[2] = response[i].Status;
                data.addRow(row);
            }

            var options = {
                width: 800
            };



            options['page'] = 'enable';
            options['pageSize'] = 10;
            //options['pagingSymbols'] = { prev: '  <  ', next: '  >  ' };
            options['pagingButtonsConfiguration'] = 'auto';


            //Pie Chart
            var hdValue2 = document.getElementById("<%=hdData2.ClientID%>").value;
            var response2 = $.parseJSON(hdValue2);

            var data2 = new google.visualization.DataTable();
            data2.addColumn('string', 'Status');
            data2.addColumn('number', 'Room Status');

            for (var i = 0; i < response2.length; i++) {
                var row = new Array();
                row[0] = response2[i].Status;
                row[1] = response2[i].Count;
                data2.addRow(row);
            }
            var options2 = {
                'legend': 'bottom',
                'title': 'Room Status',
                'titleFontSize': 20,
                'backgroundColor': '#F9F9F9',
                'width': 500,
                'height': 500
            }
            chart = new google.visualization.Table(document.getElementById('chart_div'));
            chart.draw(data, options);

            chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
            chart2.draw(data2, options2);


            //google.visualization.events.addListener(chart2, 'select', selectHandler);
        }
    </script>
    <script type="text/javascript">
        $(document).ready(drawChart);

    </script>
    <script type="text/javascript">
        function PrintPanel() {
            var panel = document.getElementById("<%=printPnl.ClientID %>");
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(panel.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            setTimeout(function () {
                printWindow.print();
            }, 500);
            return false;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div style="margin-top: 20px; margin-left: 3%; margin-right: 3%">
        <asp:Panel ID="printPnl" runat="server">
            <h1>Room Status Report</h1>
            <br />
            <strong>Choose the following status(es) you will like to view:</strong><br />
            <asp:CheckBoxList ID="statusCbl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="statusCbl_SelectedIndexChanged" RepeatDirection="Horizontal">
                <asp:ListItem>Vacant</asp:ListItem>
                <asp:ListItem>Vacant &amp; Cleaning</asp:ListItem>
                <asp:ListItem>Reserved</asp:ListItem>
                <asp:ListItem>Occupied</asp:ListItem>
            </asp:CheckBoxList>
            <br />
            <asp:Label ID="emptyLbl" runat="server" ForeColor="Red"></asp:Label>
            <asp:Panel ID="chartPnl" runat="server" Visible="False">
                <div id="chart_div2"></div>
                <div id="chart_div"></div>
                <br />
                <asp:HiddenField ID="hdData" runat="server" />
                <asp:HiddenField ID="hdData2" runat="server" />
                <br />
                <asp:Button ID="printBtn" runat="server" OnClientClick="return PrintPanel();" Text="Print Preview" />
            </asp:Panel>
        </asp:Panel>
    </div>
</asp:Content>
